// 自检结论
import {
  Button,
  Cell,
  Collapse,
  Flex,
  Popup,
  Signature,
  SignatureInstance,
} from "@taroify/core";
import { View } from "@tarojs/components";
import React, { useRef, useState } from "react";

type TSelfExaminaConcluProps = {
  setSignatureImg: React.Dispatch<
    React.SetStateAction<
      | {
          image: string;
          canvas: HTMLCanvasElement | null;
        }
      | undefined
    >
  >;
};

const SelfExaminaConclu: React.FC<TSelfExaminaConcluProps> = ({
  setSignatureImg,
}) => {
  const [value, setValue] = useState([0]);

  const [showSignatureModal, setShowSignatureModal] = useState<boolean>(false);

  const ref = useRef<SignatureInstance>(null);

  return (
    <View className="min-h-[80vh] pb-8">
      <View className="mb-2">
        <View className="mb-2 font-semibold">整体检查结果</View>
        <View className="flex flex-col gap-1 p-2 bg-white">
          <View className="">检查项数: 0</View>
          <View className="">不符合项数: 0</View>
          <View className="">不适用项数: 0</View>
        </View>
      </View>
      <View className="">
        <View className="mb-2 font-semibold">各项检查结果</View>
        <View className="bg-white">
          <Collapse value={value} onChange={setValue}>
            <Collapse.Item title="月调度记录">
              <View className="">
                <View className="">检查项数: 0</View>
                <View className="">不符合项数: 0</View>
                <View className="">不适用项数: 0</View>
              </View>
            </Collapse.Item>
            <Collapse.Item title="会议纪要">
              <View className="">
                <View className="">检查项数: 0</View>
                <View className="">不符合项数: 0</View>
                <View className="">不适用项数: 0</View>
              </View>
            </Collapse.Item>
            <Collapse.Item title="会议主要内容">
              <View className="">
                <View className="">检查项数: 0</View>
                <View className="">不符合项数: 0</View>
                <View className="">不适用项数: 0</View>
              </View>
            </Collapse.Item>
          </Collapse>
        </View>
      </View>
      <View className="">
        <View className="my-2 font-semibold">检查人员</View>
        <Cell
          title="检查人员电子签名"
          onClick={() => setShowSignatureModal(true)}
        >
          待签名
        </Cell>
      </View>
      <Popup open={showSignatureModal} onClose={setShowSignatureModal}>
        <View className="w-[90vw] p-4 bg-white ">
          <Signature ref={ref} />
          <Flex justify="end">
            <Button
              size="small"
              onClick={() => {
                ref.current?.clear();
              }}
              style={{ marginRight: "1rem" }}
            >
              取消
            </Button>
            <Button
              size="small"
              color="primary"
              onClick={() => {
                console.log(ref.current?.getImage());
                setSignatureImg(ref.current?.getImage());
              }}
            >
              确认
            </Button>
          </Flex>
        </View>
      </Popup>
    </View>
  );
};

export default SelfExaminaConclu;
